<template>
	<view class="container">
		<!-- 自定义头部 -->
		<HeaderNav ref="headerNavComponent" :title="'我的'" :backIconShow="false"></HeaderNav>

		<scroll-view @scroll="rollView" :scroll-top="scrollTop" scroll-y scroll-with-animation :refresher-enabled="true"
			:refresher-threshold="headerNavHeight" refresher-default-style="none" slot="refresher"
			refresher-background="transparent" :refresher-triggered="refresherTriggered" @refresherrefresh="openLoading"
			@refresherrestore="closeLoading" class="container-scroll" style="height: 100vh;">
			<view class="container-box">
				<!-- 占位 -->
				<view v-if="!refresherLoading" :style="'width: 100%;height: ' + headerNavHeight + 'px'"></view>
				<!-- 占位 -->

				<!-- 自定义上拉加载样式 -->
				<view slot="refresher" v-if="refresherLoading">
					<u-loadmore status="loading" iconSize="32" loading-text="正在加载..." fontSize="32" />
				</view>

				<!-- 内容 -->
				<view style="width: 100%;height: 500rpx;background-color: red;"></view>
				<view style="width: 100%;height: 500rpx;background-color: yellow;"></view>
				<view style="width: 100%;height: 500rpx;background-color: red;"></view>
				<view style="width: 100%;height: 500rpx;background-color: yellow;"></view>
				<view style="width: 100%;height: 500rpx;background-color: red;"></view>
				<view style="width: 100%;height: 500rpx;background-color: yellow;"></view>
				<view style="width: 100%;height: 500rpx;background-color: red;"></view>
				<view style="width: 100%;height: 500rpx;background-color: yellow;"></view>
				<!-- 内容 -->
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState,
	} from "vuex";
	
	// import {
	// 	requestGet,
	// 	requestPost,
	// } from "@/service/request.js";
	// import {
	// 	xxxAPI,
	// } from "@/service/api/index.js";
	
	import HeaderNav from "@/components/HeaderNav/index.vue";

	export default {
		components: {
			HeaderNav,
		},
		data() {
			return {
				headerNavHeight: 0,

				// 自定义下拉动画
				scrollTop: 0,
				oldScrollTop: 0,
				refresherLoading: false,
				refresherTriggered: false,

				// 内容
			}
		},
		onLoad() {},
		onShow() {
			this.$store.dispatch("SetPagePath", "/pages/mine/mine");
			
			this.setInitialize();
		},
		mounted() {
			this.$refs.headerNavComponent.setHeaderNav();
			this.headerNavHeight = this.$refs.headerNavComponent.headerNavHeight;
		},
		computed: {
			// 使用对象展开运算符将此对象混入到外部对象中
			...mapState({
				pagePath: state => state.app.pagePath,
			})
		},
		methods: {
			/**
			 * @description 初始化页面数据
			 */
			setInitialize() {
				this.scrollTop = 0;
				this.oldScrollTop = 0;
				// 内容
				uni.showLoading({
					title: '加载中',
					mask: true,
				});

				setTimeout(() => {
					uni.hideLoading();
					this.initLoading();
				}, 500)
			},
			/**
			 * @description scroll-view 滚动事件
			 */
			rollView(e) {
				// 获取到顶部的距离
				const {
					scrollTop
				} = e.detail;

				this.oldScrollTop = scrollTop;
			},
			/**
			 * @description scroll-view 自定义下拉刷新
			 */
			openLoading() {
				if (this._freshing) return;
				this.refresherLoading = true;
				this.refresherTriggered = true;
				this._freshing = true;

				this.setInitialize();
			},
			closeLoading() {
				this.refresherTriggered = "restore";
			},
			initLoading() {
				this.refresherLoading = false;
				this.refresherTriggered = false;
				this._freshing = false;
			},
			/**
			 * @description 路由跳转tabBar页面
			 */
			goSwitchTab(url) {
				uni.switchTab({
					url
				});
			},
			/**
			 * @description 路由跳转非tabBar页面
			 */
			goNavigateTo(url) {
				uni.navigateTo({
					url
				});
			},
			/**
			 * @description 路由跳转任意页面，并清空所有页面缓存
			 */
			goReLaunch(url) {
				uni.reLaunch({
					url
				});
			},
			/**
			 * @description 下拉刷新钩子
			 */
			onPullDownRefresh() {
				this.setInitialize();
				uni.stopPullDownRefresh();
			},
			/**
			 * @description 上拉加载钩子
			 */
			onReachBottom() {
				console.log("上拉加载！！！");
			},
			/**
			 * @description 返回操作钩子
			 */
			onBackPress(e) {
				// backbutton 是点击物理按键返回，navigateBack是uniapp中的返回（比如左上角的返回箭头）
				if (e.from === "backbutton") {
					// 阻止返回true
					// return true; // 一级页面阻止返回，其它不阻止
				}
			},
			/**
			 * @description 分享（兼容小程序）
			 */
			onShareAppMessage() {
				return {
					title: "我的",
					path: "/pages/mine/mine"
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
</style>